<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<!-- <form action="http://127.0.0.1:8080/calc/sum" method="post">
    <h2>计算器</h2>
     <input type = "text" name = "num1"><br>
     <input type = "text" name = "num2"><br>
     <input type = "submit" name = "点我提交">
</form>-->
<div id="contain">
    <input type="text" id="num1"><br>
    <input type="text" id="num2"><br>
    <button type="button" id="submit"> 点我提交</button><br>
    <span>结果 = </span><span id = "result"></span>
</div>
<script>
    <!--     使用ajax来让放回的数据显示到原来的html页面上-->
    //发起请求 并获得返回
    $("#submit").click(function () {
       var data = {
            n1: $("#num1").val(),
            n2: $("#num2").val()
        }
        $.ajax({
            url: "/calc/sum1",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function (result) {
                if (result) {

                    console.log("成功返回");
                    $("#result").text(result);
                } else {
                    console.log("数据错误")
                }

            },
            error: function () {
                console.log("出错了");
            }
        });
    });
</script>

</body>

</html>